<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item label="用户名：" prop="username">
        <el-input v-model="form.username" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input placeholder="请输入密码" v-model="form.password" show-password style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="邮箱：" prop="mail">
        <el-input v-model="form.mail" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="form.sex">
          <el-radio label="男"></el-radio>
          <el-radio label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="兴趣爱好：" prop="hobby">
        <el-checkbox-group v-model="form.hobby">
          <el-checkbox label="篮球" name="type"></el-checkbox>
          <el-checkbox label="羽毛球" name="type"></el-checkbox>
          <el-checkbox label="足球" name="type"></el-checkbox>
          <el-checkbox label="乒乓球" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">注册</el-button>
        <el-button @click="clearSubmit()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
// import axios from "axios";
export default {
  data() {
    return {
      form: {
        username: "",
        password: "",
        mail: "",
        sex: "",
        hobby: [],
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 6, message: "长度在 3 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "blur",
          },
        ],
        mail: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        hobby: [
          {
            type: "array",
            required: true,
            message: "请选择兴趣爱好",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    onSubmit(form) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$message({
            message: "注册成功！",
            type: "success",
          });
          for (let i in form) {
            console.log(form[i]);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    clearSubmit() {
      this.$refs["form"].resetFields();
    },
  },
};
</script>
